<template>
    <div class="bg-box e1 font-12" :class="ggclass" :style="{ 'background-color': stateBack[gg_status], color: stateColor[gg_status], height }">
        <slot> </slot>
    </div>
</template>

<script>
export default {
    name: "qg-bg-state",
    props: {
        state: {
            type: [Number, String],
            default: "0",
        },
        ggclass: {
            type: String,
            default: "",
        },
        stateBack: {
            type: Array,
            default: () => ["#dcfbd1", "#f5f5f5", "#e7eefc", "#fbe1e3"],
        },
        stateColor: {
            type: Array,
            default: () => ["#3db728", "#999999", "#3e79f7", "#f5434d"],
        },
        height: {
            type: String,
            default: "",
        },
    },
    computed: {
        gg_status() {
            return Number(this.state);
        },
    },
};
</script>

<style lang="less" scoped>
.bg-box {
    height: 20rem;
    display: inline-flex;
    align-items: center;
    padding: 0 7rem;
    border-radius: 3rem;
    max-width: 50rem;
}
</style>
